@charset "utf-8";
/*************************************css reset*************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family:Arial,Helvetica,'\5FAE\8F6F\96C5\9ED1','\5B8B\4F53',sans-serif;
}
a {
	text-decoration: none;
	color: #666
}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
em,i,dfn {font-style: normal}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*************************************css style preset*************************************/
.clearfix:after { clear:both; display:table;content:'';}
.clearfix { *zoom:1;}
.tc{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.pr{position: relative;}
.pb{position: absolute;}
.pf{position: fixed;}
.of{overflow:hidden}
.hide{display: none;}
.vh{visibility: hidden;}
.vt{vertical-align: top;}
.vm{vertical-align: middle;}
.vb{vertical-align: bottom;}
.middle{width: 0;height: 100%;display: inline-block;*display: inline;*zoom:1;vertical-align: middle;}
.inline{display: inline-block;*display: inline;*zoom:1;}
.block{display: block;}
.cover{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.text-overflow{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

*{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust:100%;}
body{font-family: Helvetica;}
a,input,textarea,button{-webkit-tap-highlight-color: transparent;}
input,textarea,button{-webkit-appearance:none;border-radius: 0;}
input,textarea{-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;}

/*************************************** css formal style **********************************/
html,body{overflow: hidden;height: 100%;}
body{font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;position: relative;background: #fff;}

/**********登录**********/
.login{}

/*表单*/
.login .login-wrap{overflow: hidden;}
.login .login-section{margin-top: 100px;text-align: center;}
.login .login-section .title{font-size: 48px;color: #3a3a3a;}
.login .form-wrap{margin-top: 75px;padding: 0 67px;}
.login .form-wrap .form-item{position: relative;border-bottom: 2px solid #e5e5e5;padding: 0 14px;}
.login .form-wrap .form-item.focus{border-color: #fe9c00;}
.login .form-wrap .form-item .input-txt{display: block;width: 100%;border: none;font-size: 32px;height: 48px;line-height: 48px;padding: 39px 0;}
.login .form-wrap .form-item .input-txt:focus{color: #3a3a3a;}
.login .form-wrap .error-tip{font-size: 30px;color: #f35050;margin-top: 40px;height: 40px;line-height: 40px;}
.login .form-wrap .btn-login{display: block;margin-top: 46px;border-radius: 44px;height: 88px;line-height: 88px;color: #fff;font-size: 30px;background: #fe9c00;}
.login .form-wrap .btn-login.active{background: #f19502;}
.login .form-wrap .btn-login.disabled{background: #e6e6e6;color: #666;}

/**********首页**********/
.index{background: #f2f2f2;}

.index .container{padding: 0 30px;}

/*头部*/
.index .header{padding-top: 26px;}
.index .header .img-logo{float: left;height: 58px;margin-left: 12px;}
.index .header .user-info-area{float: right;margin: 10px 8px 0 0;position: relative;padding-right: 20px;}
.index .header .img-avatar{float: left;height: 38px;}
.index .header .user-info{float: left;margin: 3px 0 0 8px;line-height: 32px;font-size: 24px;color: #707070;}

.index .header .icon-more{position: absolute;right: 0;top: 15px;width: 0;height: 0;border: 8px solid transparent;border-top-color: #666;-webkit-transition: all .2s ease;transition: all .2s ease;}
.index .header .user-info-area.active .icon-more{top: 7px;border-color: transparent transparent #666;}

.index .header .nav-list-wrap{display: none;position: absolute;top: 70px;right: 0;-webkit-box-shadow: 0 4px 16px rgba(52,32,32,0.16);box-shadow: 0 4px 16px rgba(52,32,32,0.16);}
.index .header .user-info-area.active .nav-list-wrap{display: block;-webkit-animation: upbit .3s both;animation: upbit .3s both;}

.index .header .nav-list-wrap .triangle{position: absolute;font-size: 36px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.index .header .nav-list-wrap .triangle-1{top: -18px;color: #d7d9dc;}
.index .header .nav-list-wrap .triangle-2{top: -17px;color: #fff;}

.index .header .nav-list{line-height: 2.5;font-size: 24px;color: #707070;padding: 15px 0;background: #fff;border-radius: 2px;}
.index .header .nav-list .link{display: block;padding: 0 30px;color: #333;white-space: nowrap;}
.index .header .nav-list .link.active{background: #f2f2f2;}

/*数据总览*/
.index .overview-list{overflow: hidden;margin-top: 2px;text-align: center;}
.index .overview-list .list-item{float: left;margin-top: 40px;width: 198px;height: 118px;border-radius: 16px;border: 2px solid #ebeae7;background: #fff;margin-left: 42px;}
.index .overview-list .list-item:nth-child(3n+1){margin-left: 0;}
.index .overview-list .item-title{color: #707070;font-size: 24px;margin-top: 24px;}
.index .overview-list .item-txt{color: #fe9c00;font-size: 28px;margin-top: 25px;}

/*数据类别区域*/
.index .type-area{margin-top: 54px;}

.index .type-section{margin-top: 104px;}
.index .type-section:first-child{margin-top: 0;}

.index .type-title{font-size: 32px;font-weight: bold;color: #707070;line-height: 48px;padding-left: 20px;border-left: 10px solid #707070;}

.index .type-list{margin-top: 40px;}
.index .type-list .list-item{float: left;margin-left: 110px;}
.index .type-list .list-item:nth-child(2n+1){margin-left: 0;}

.index .type-list .link{display: block;width: 210px;height: 120px;padding: 0 30px;border: 2px solid #707070;border-radius: 20px;background: #fff;box-shadow: 6px 6px 12px rgba(52,32,32,.16);font-size: 0;}

.index .type-list .img-icon{height: 64px;}
.index .type-list .item-txt{font-size: 28px;color: #707070;margin-left: 26px;width: 118px;line-height: 1.5;}

/*我要充值*/
.recharge{background: #fff;}
.recharge .container{padding-top: 1px;}
.recharge .container .big-title{margin-top: 54px;font-size: 36px;text-align: center;color: #000;}
.recharge .container .small-title{margin-top: 23px;font-size: 26px;text-align: center;color: #000;}
.recharge .recharge-area{padding: 0 24px;margin-top: 31px;}
.recharge .recharge-area .title{font-size: 30px;color: #010101;}
.recharge .recharge-area .recharge-list{margin-top: 22px;padding-bottom: 1px;}
.recharge .recharge-list .list-item{float: left;width: 218px;height: 98px;margin-bottom: 24px;position: relative;background: url(../img/recharge/bg_recharge.png) no-repeat;}
.recharge .recharge-list .list-item:nth-child(3n+2){margin: 0 24px;}
.recharge .recharge-list .list-item.active{background-position: 0 -98px;}
.recharge .recharge-list .list-item .tip{line-height: 48px;color: #666;text-align: center;}
.recharge .recharge-list .list-item.active .tip{color: #fff;}
.recharge .recharge-list .list-item .price{font-size: 30px;}
.recharge .recharge-list .list-item .point{font-size: 24px;}
.recharge .recharge-list .list-item-hot .hot{display: none;position: absolute;width: 34px;height: 32px;right: 18px;top: 0;background: url(../img/recharge/hot.png) no-repeat;}
.recharge .recharge-list .list-item-hot.active .hot{display: block;}
.recharge .recharge-now{text-align: center;font-size: 34px;line-height: 88px;}
.recharge .recharge-now a{display: block;color: #7d4d00;margin-top: 65px;background: #fdd628;}
.recharge .recharge-now a.touchstart{background: #f2cd27;}

/*充值成功*/
.recharge-success{background: #f3f3f3;}
.recharge-success .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.recharge-success .content{padding-top: 1px;text-align: center;}
.recharge-success .content .img-logo{display: block;margin: 86px auto 0;}
.recharge-success .content .title{font-size: 30px;color: #000;margin-top: 52px;margin-bottom: 91px;}
.recharge-success .content .tip{font-size: 26px;color: #000;margin-top: 9px;}
.recharge-success .content .tip .txt{font-size: 48px;color: #f9d401;margin-right: 5px;}
.recharge-success .btn-area{position: absolute;width: 700px;height: 86px;bottom: 24px;left: 24px;line-height: 86px;text-align: center;border-radius: 8px;border: 1px solid #f9d401;overflow: hidden;}
.recharge-success .btn-area .btn{display: block;font-size: 34px;color: #f9d401;}
.recharge-success .btn-area .btn.active{background: #f9d401;color: #fff;}


/*充值记录*/
.recharge-record{background: #f3f3f3;}
.recharge-record .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.recharge-record .wrapper{position: absolute;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;}
.recharge-record .record-list{background: #fff;}
.recharge-record .record-list .list-item{border-top: 1px solid #e6e6e6;padding: 31px 24px 28px 24px;}
.recharge-record .record-list .list-item:first-child{border-top: none;}
.recharge-record .record-list .tip-1{margin-bottom: 25px;}
.recharge-record .record-list .price-desc{font-size: 32px;color: #333;}
.recharge-record .record-list .point{font-size: 26px;color: #999;margin-left: 10px;}
.recharge-record .record-list .price{font-size: 32px;float: right;color: #ec2f04;}
.recharge-record .record-list .tip-2{font-size: 24px;color: #999;}

/*个人中心*/
.user{background: #f3f3f3;}
.user .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.user .user-info-wrap{position: relative;}
.user .user-info{height: 439px;padding-top: 1px;background: url(../img/user/bg.png) no-repeat center;text-align: center;}
.user .head-portrait-wrap{margin: 24px auto 0;width: 122px;height: 122px;padding: 4px;border-radius: 50%;background: #f9d598;}
.user .head-portrait{height: 100%;overflow: hidden;border-radius: 50%;}
.user .head-portrait .img{display: block;width: 100%;}
.user .user-info .tel{font-size: 26px;color: #fff;margin-top: 20px;}
.user .user-info .id{font-size: 26px;color: #fff;margin-top: 12px;}
.user .point-wrap{margin: 40px auto 0;font-size: 0;width: 232px;height: 54px;line-height: 54px;border-radius: 27px;border: 2px solid #fdefb8;}
.user .point-wrap .img{margin-right: 16px;}
.user .point-wrap .point{font-size: 26px;color: #fff;}
.user .user-behavior{position: absolute;width: 702px;bottom: -124px;left: 24px;box-shadow: 0 0 12px rgba(202,202,202,.41);}
.user .user-behavior .line{height: 1px;background: #e4e4e4;}
.user .user-behavior .behavior-item{border-radius: 4px;background: #fff;height: 98px;line-height: 98px;font-size: 0;}
.user .behavior-item .img-icon-wrap{width: 60px;margin-left: 24px;}
.user .behavior-item .img-icon{display: block;}
.user .behavior-item .txt{font-size: 32px;color: #333;margin-left: 26px;}
.user .behavior-item .img-right-arrow{margin-right: 24px;margin-top: 35px;}

/*奖品邮寄*/
.mail{background: #f3f3f3;}
.mail .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.mail .wrapper{position: absolute;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;}
.mail .mail-address-info{background: rgba(255,255,255,.96);}
.mail .mail-title{padding-left: 27px;height: 88px;line-height: 88px;font-size: 32px;color: #333;border-bottom: 1px solid #e6e6e6;}
.mail .mail-address-no{line-height: 88px;height: 88px;font-size: 0;padding-right: 25px;}
.mail .mail-address-no .txt{font-size: 26px;color: #333;margin-right: 19px;}
.mail .mail-address-yes{}
.mail .mail-address-yes .address-link{padding: 20px 65px 20px 24px;position: relative;display: block;}
.mail .mail-address-yes .address-item{font-size: 26px;line-height: 32px;margin-bottom: 15px;}
.mail .mail-address-yes .address-item .title{width: 140px;color: #333;text-align: right;position: absolute;}
.mail .mail-address-yes .address-item .info{color: #333;margin-left: 140px;}
.mail .mail-address-yes .img{position: absolute;right: 25px;top: 50%;margin-top: -13px;}
.mail .line{height: 7px;margin-top: 1px;background: url(../img/mail/split_line.png) repeat-x;}
.mail .prize-info-wrap{background: rgba(255,255,255,.96);margin-top: 21px;}
.mail .prize-list{padding: 0 24px;border-bottom: 1px solid #e6e6e6;}
.mail .prize-list .list-item{position: relative;border-top: 1px solid #e6e6e6;height: 186px;line-height: 186px;}
.mail .prize-list .list-item:first-child{border-top: none;}
.mail .prize-list .list-item .img-prize-wrap{width: 140px;height: 140px;border-radius: 50%;overflow: hidden;background: #f3f3f3;}
.mail .prize-list .list-item .img-prize{display: block;width: 100%;}
.mail .prize-list .list-item .txt{font-size: 26px;color: #000;margin-left: 23px;}
.mail .prize-list .list-item .img-check{position: absolute;width: 34px;height: 34px;top: 50%;margin-top: -17px;right: 16px;background: url(../img/mail/check.png) no-repeat;}
.mail .prize-list .list-item.active .img-check{background-position: 0 -34px;}
.mail .order-details{padding: 17px 0 15px 24px;}
.mail .order-details .details-item{line-height: 32px;color: #666;font-size: 22px;}
.mail .order-details .details-item .title{width: 120px;}
.mail .prize-remarks{}
.mail .prize-remarks .text-area{-webkit-box-sizing: border-box;box-sizing: border-box;border: none;display: block;width: 100%;height: 138px;padding: 24px;resize: none;font-size: 26px;line-height: 32px;color: #000;}
.mail .placeholder-1{height: 136px;}
.mail .btn-area{position: absolute;width: 702px;height: 88px;bottom: 24px;left: 24px;line-height: 88px;text-align: center;border-radius: 8px;overflow: hidden;}
.mail .btn-area .btn{background: #f9d401;display: block;font-size: 34px;color: #fff;}
.mail .btn-area .btn.active{background: #f2cd27;}
.mail .btn-area .btn.disabled{background: #999;}

/*填写邮寄地址*/
.mail .mail-address-fill{background: rgba(255,255,255,.96);}
.mail .mail-address-fill .address-item{height: 88px;border-bottom: 1px solid #e6e6e6;padding: 0 24px;}
.mail .mail-address-fill .address-item .title{position: absolute;width: 140px;color: #333;font-size: 26px;line-height: 88px;}
.mail .mail-address-fill .address-item .input-wrap{margin-left: 140px;}
.mail .mail-address-fill .address-item .input-txt{display: block;width: 100%;color: #333;border: none;padding: 0;font-size: 26px;line-height: 44px;padding: 22px 0;}
.mail .mail-address-fill .address-item .region-link{display: block;height: 100%;}
.mail .mail-address-fill .address-item .region-info{line-height: 88px;margin-right: 18px;font-size: 26px;color: #333;}
.mail .mail-address-fill .address-item .img{margin-top: 30px;}
.mail .mail-address-fill .address-remarks{}
.mail .mail-address-fill .address-remarks .text-area{-webkit-box-sizing: border-box;box-sizing: border-box;border: none;display: block;width: 100%;height: 138px;padding: 24px;resize: none;font-size: 26px;line-height: 32px;color: #000;}

/*订单详情*/
.order{background: #f3f3f3;}
.order .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.order .nav-bar{height: 56px;background: rgba(255,255,255,.96);padding: 19px 24px;}
.order .nav-list{}
.order .nav-list .list-item{-webkit-box-sizing: border-box;box-sizing: border-box;float: left;width: 50%;line-height: 52px;text-align: center;color: #f9d401;font-size: 26px;border-top:2px solid #f9d401;border-bottom:2px solid #f9d401;}
.order .nav-list .list-item:first-child{border-radius: 8px 0 0 8px;border-left:2px solid #f9d401;}
.order .nav-list .list-item:last-child{border-radius: 0 8px 8px 0;border-right:2px solid #f9d401;}
.order .nav-list .list-item.active{background: #f9d401;color: #fff;border: none;line-height: 56px;}
.order .wrapper{position: absolute;overflow: hidden;top: 94px;bottom: 0;width: 100%;}
.order .wrapper-con{padding: 0 24px;}
.order .wrapper-con-1{padding-bottom: 150px;}
.order .mail-list{padding: 20px 0;}
.order .mail-no-list .list-item{height: 186px;padding: 0 24px;background: rgba(255,255,255,.96);box-shadow: 0px 2px 5px 0px rgba(158, 158, 158, 0.22);border-radius: 9px;margin-top: 20px;font-size: 0;}
.order .mail-no-list .list-item:first-child{margin-top: 0;}
.order .mail-no-list .list-item .img-prize-wrap{width: 140px;height: 140px;border-radius: 50%;overflow: hidden;background: #f3f3f3;}
.order .mail-no-list .list-item .img-prize{display: block;width: 100%;}
.order .mail-no-list .list-item .desc{margin-left: 23px;}
.order .mail-no-list .list-item .desc .title{font-size: 32px;color: 000;}
.order .mail-no-list .list-item .desc .time{font-size: 26px;color: #666;margin-top: 14px;}
.order .mail-yes-list .list-item{background: rgba(255,255,255,.96);border-radius: 9px;margin-top: 20px;overflow: hidden;}
.order .mail-yes-list .list-item:first-child{margin-top: 0;}
.order .mail-yes-list .list-head{height: 72px;border-bottom: 1px solid #e6e6e6;line-height: 72px;font-size: 0;}
.order .mail-yes-list .details-link{padding: 0 24px;display: block;font-size: 26px;}
.order .mail-yes-list .details-link .txt{color: #000;}
.order .mail-yes-list .details-link .img{margin-top: 22px;}
.order .mail-yes-list .list-body{height: 167px;padding-left: 24px;}
.order .mail-yes-list .list-body .img-prize-wrap{float: left;width: 120px;height: 120px;border-radius: 50%;overflow: hidden;background: #f3f3f3;margin-right: 24px;margin-top: 13px;}
.order .mail-yes-list .list-body .img-prize{display: block;width: 100%;}
.order .mail-yes-list .list-body .dot-wrap{float: left;margin-left: 9px;font-size: 0;margin-top: 78px;}
.order .mail-yes-list .list-body .dot{width: 12px;height: 12px;border-radius: 50%;background: #f9d401;margin-right: 10px;}
.order .mail-yes-list .list-foot{border-top: 1px solid #e6e6e6;padding: 16px 24px;}
.order .mail-yes-list .list-foot .tip{color: #666;font-size: 24px;line-height: 38px;}
.order .mail-yes-list .list-foot .item{float: left;width: 50%;}
.order .mail-yes-list .list-foot .txt{color: #000;}
.order .btn-area{position: absolute;width: 702px;height: 88px;bottom: 24px;left: 24px;line-height: 88px;text-align: center;border-radius: 8px;overflow: hidden;}
.order .btn-area .btn{background: #f9d401;display: block;font-size: 34px;color: #fff;}
.order .btn-area .btn.active{background: #f2cd27;}

/*我的奖品*/
.prize{background: #f3f3f3;}
.prize .container{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.prize .tip-area-wrap{text-align: center;font-size: 0;}
.prize .tip-area .img{display: block;margin: 0 auto;}
.prize .tip-area .tip{font-size: 26px;color: #999;margin-top: 54px;}

/*弹出框*/
.pop-box{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.pop-box-address-tip{z-index: 1000;}
.pop-box-address-tip .mask-layer{background: rgba(0,0,0,0);}
.pop-box-address-tip .pop-box-con{position: absolute;width: 390px;height: 172px;left: 50%;top: 50%;margin-left: -195px;margin-top: -96px;background: rgba(0,0,0,.6);border-radius: 20px;}
.pop-box-address-tip .pop-box-con .img{display: block;margin: 40px auto 0;}
.pop-box-address-tip .pop-box-con .tip-info{color: #fff;font-size: 30px;margin-top: 15px;text-align: center;}

/*picker组件*/
.picker-body .picker{font-size:28px;}
.picker-body .picker .picker-panel{height:486px;transform:translateY(486px);-webkit-transform:translateY(486px);}
.picker-body .picker .picker-panel .picker-choose{height:100px;font-size:28px;}
.picker-body .picker .picker-panel .picker-choose .picker-title{line-height:100px;font-size:38px;}
.picker-body .picker .picker-panel .picker-choose .cancel,.picker-body .picker .picker-panel .picker-choose .confirm{padding:20px;top:12px;font-size: 36px;-webkit-tap-highlight-color: transparent;}
.picker-body .picker .picker-panel .picker-content .mask-bottom,.picker-body .picker .picker-panel .picker-content .mask-top{height:136px;}
.picker-body .picker .picker-panel .picker-content .mask-top:after,.picker-body .picker .picker-panel .picker-content .mask-top:before{border-top:1px solid #ccc;}
.picker-body .picker .picker-panel .picker-content .mask-bottom:after,.picker-body .picker .picker-panel .picker-content .mask-bottom:before{border-top:1px solid #ccc;}
.picker-body .picker .picker-panel .wheel-wrapper{padding:0 20px;}
.picker-body .picker .picker-panel .wheel-wrapper .wheel{-ms-flex:1 1 1e-9px;-webkit-box-flex:1;flex:1;flex-basis:1e-9px;width:1%;height:346px;font-size:42px;}
.picker-body .picker .picker-panel .wheel-wrapper .wheel .wheel-scroll{margin-top:136px;line-height:72px;}
.picker-body .picker .picker-panel .wheel-wrapper .wheel .wheel-scroll .wheel-item{height:72px;}
.picker-body .picker .picker-footer{height:40px;}

/**********屏蔽UC浏览器的广告**********/
[data-text]{display: none !important;}

/**********通用样式**********/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #bebcbc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #bebcbc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #bebcbc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #bebcbc;
}

/**********动画效果**********/
@-webkit-keyframes upbit {
    from {
        -webkit-transform: translate3d(0, 60px, 0);
        opacity: .3
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1
    }
}

@keyframes upbit {
    from {
        transform: translate3d(0, 60px, 0);
        opacity: .3
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
